
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传功能</title>
</head>
<body>
    <input type="file" class="upload">
    <img src="" alt="" class="my-img">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /**
         * 目标：图片上传，显示到网页上
         *  1. 获取图片文件
         *  2. 使用 FormData 携带图片文件
         *  3. 提交到服务器，获取图片url网址使用
        */

        // input框的change事件
        document.querySelector(".upload").addEventListener("change",function (event) {
            // 上传的图片
            console.log(event.target.files[0]);
            // 2. 使用 FormData 携带图片文件
            let fd = new FormData()
            fd.append('img',event.target.files[0])

            // axios({
            //     url:"https://hmajax.itheima.net/api/uploadimg",
            //     method:"POST",
            //     data:fd
            // }).then(res=>{
            //     console.log(res);
            //     // 取出图片url网址，用img标签加载显示
            //     document.querySelector(".my-img").src = res.data.data.url
            // })

            var xhr = new XMLHttpRequest;
            xhr.open('post', 'https://hmajax.itheima.net/api/uploadimg');
            /*
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                设置请求头的contentType
            */
            // 监听上传进度
            xhr.upload.onprogress = function (ev) {
                var percent = (ev.loaded / ev.total) * 100 + '%';
                console.log(percent);
                // percent.style.width = percent;
            }
            
            xhr.send(fd);
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    let res = JSON.parse(xhr.response)
                    console.log(res);
                    
                    document.querySelector(".my-img").src = res.data.url
                }
            }


        })  



    </script>
</body>
</html>